<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/crm/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/crm/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/static/crm/css/public.css" media="all">

        <style>
        .sm-st-info span {
            display: block;
            font-size: 24px;
            font-weight: 600;
        }

        .stat-icon {
            text-align: center;
            margin-bottom: 5px;
        }

        .stats .stat-icon {
            color: #28bb9c;
            display: inline-block;
            font-size: 26px;
            text-align: center;
            vertical-align: middle;
            width: 50px;
            float: left;
        }

        .stat {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
        }

        .stat .value {
            font-size: 20px;
            line-height: 24px;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 500;
        }

        .stat .name {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .stat.lg .value {
            font-size: 26px;
            line-height: 28px;
        }

        .stat.lg .name {
            font-size: 16px;
        }

        .stat-col .progress {
            height: 2px;
        }

        .stat-col .progress-bar {
            line-height: 2px;
            height: 2px;
        }

        #statistics .panel h5 {
            font-size: 13px;
        }

        .bg-aqua1-gradient {
            background: #3498db !important;
            background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #f2f2f5), color-stop(1, #f2f2f5)) !important;
            background: -ms-linear-gradient(bottom, #3498db, #52a7e0) !important;
            background: -moz-linear-gradient(center bottom, #3498db 0%, #52a7e0 100%) !important;
            background: -o-linear-gradient(#52a7e0, #3498db) !important;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#52a7e0', endColorstr='#3498db', GradientType=0) !important;
        }
        .progress {
            background-color: #d7d7d7;
        }
        </style>

</head>
<body>
    控制器
    <div class="layui-card">
        <div class="layui-card-header"><i class="fa fa-warning icon"></i>控制台 &nbsp;
            用于展示当前系统中的统计数据、统计报表及重要实时数据</div>
        <div class="col-lg-6">
            <div class="panel bg-aqua1-gradient no-border" style="height: 488px">
                <div class="panel-body">
                    <div class="panel-title">
                        <span class="label label-primary pull-right"></span>

                        <h4><span class="label label-primary "> 常用事项</span></h4>
                    </div>
                    <div class="panel-content">
                        <div class="card sameheight-item stats ">
                            <div class="card-block">
                                <div class="row row-sm stats-container" style="margin-top: 40px;">
                                    <div class="col-xs-6 stat-col">
                                        <div class="stat-icon"><i class="fa fa-rocket"></i></div>
                                        <div class="stat">
                                            <a href="" class="btn-addtabs" title="需跟进的客户">
                                                <div class="value"> 121</div>
                                                <div class="name"> 今日需跟进的客户</div>
                                            </a>
                                        </div>
                                        <div class="progress">
                                            <div class="progress-bar progress-bar-success" style="width: 30%"></div>
                                        </div>
                                    </div>
                                    <div class="col-xs-6 stat-col">
                                        <div class="stat-icon"><i class="fa fa-shopping-cart"></i></div>
                                        <div class="stat">
                                            <a href="" class="btn-addtabs" title="即将过期客户">
                                                <div class="value"> 0</div>
                                                <div class="name"> 即将过期的客户</div>
                                            </a>
                                        </div>
                                        <div class="progress">
                                            <div class="progress-bar progress-bar-success" style="width: 25%"></div>
                                        </div>
                                    </div>
                                    <div class="col-xs-6  stat-col">
                                        <div class="stat-icon"><i class="fa fa-line-chart"></i></div>
                                        <div class="stat">
                                            <a href="" class="btn-addtabs" title="需跟进的商机">
                                                <div class="value"> 84</div>
                                                <div class="name"> 今日需跟进的商机</div>
                                            </a>
                                        </div>
                                        <div class="progress">
                                            <div class="progress-bar progress-bar-success" style="width: 25%"></div>
                                        </div>
                                    </div>
                                    <div class="col-xs-6  stat-col">
                                        <div class="stat-icon"><i class="fa fa-users"></i></div>
                                        <div class="stat">
                                            <a href="" class="btn-addtabs" title="即将到期合同">
                                                <div class="value"> 44</div>
                                                <div class="name"> 即将到期合同</div>
                                            </a>
                                        </div>
                                        <div class="progress">
                                            <div class="progress-bar progress-bar-success" style="width: 25%"></div>
                                        </div>
                                    </div>
                                    <div class="col-xs-6  stat-col">
                                        <div class="stat-icon"><i class="fa fa-list-alt"></i></div>
                                        <div class="stat">
                                            <a href="" class="btn-addtabs" title="即将到期合同">
                                                <div class="value"> 44</div>
                                                <div class="name"> 待回款合同</div>
                                            </a>
                                        </div>
                                        <div class="progress">
                                            <div class="progress-bar progress-bar-success" style="width: 25%"></div>
                                        </div>
                                    </div>


                                    <div class="col-xs-6  stat-col">
                                        <div class="stat-icon"><i class="fa fa-link fa-fw"></i></div>
                                        <div class="stat">
                                            <a href="" class="btn-addtabs" title="待跟进线索">
                                                <div class="value"> 5</div>
                                                <div class="name"> 待跟进线索</div>
                                            </a>
                                        </div>
                                        <div class="progress">
                                            <div class="progress-bar progress-bar-success" style="width: 25%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</body>
</html>